import ProForm, {
  ProFormCheckbox,
  ProFormSelect,
  ProFormSwitch,
  ProFormText,
} from '@ant-design/pro-form';

import { Grid } from '@r-magician/ui';
import React from 'react';
import { getRoleList } from '../../../service/role';

const validateMessages = {
  required: '${label}不能为空',
};

const UserForm = ({ form, editable }) => {
  return (
    <ProForm
      submitter={{ render: () => null }}
      validateMessages={validateMessages}
      form={form}
    >
      <Grid col={2} gutter={20}>
        <ProFormText
          label="用户名"
          rules={[{ required: true }]}
          name="username"
          disabled={editable}
        />
        {!editable && (
          <ProFormText.Password
            label="密码"
            name="password"
            placeholder="请输入密码，不输入默认为abcd1234"
          />
        )}

        <ProFormText
          label="邮箱地址"
          name="email"
          rules={[{ type: 'email', message: '邮箱格式不正确' }]}
          placeholder="请输入邮箱地址"
        />
        <ProFormText
          label="手机号码"
          name="phone"
          placeholder="请输入手机号码"
          rules={[
            { pattern: /1[3456789]\d{9}/, message: '手机号码格式不正确' },
          ]}
        />
      </Grid>
      {/* <ProFormSwitch label="是否为超管" name="isSuperAdmin" /> */}
      <ProFormSelect
        name="roleIdList"
        mode="multiple"
        label="角色配置"
        placeholder="请选择角色"
        request={async () => {
          const res = await getRoleList();
          return res.data.docs.map((item) => {
            return {
              label: `${item.name}-${item.code}`,
              value: item.id,
            };
          });
        }}
      />
    </ProForm>
  );
};

export default UserForm;
